<script setup>
import { useEventListener } from '@vueuse/core'
import { getTcTaskInfoPage } from '@/assets/api/task'
import { ElMessage } from 'element-plus'
import useUser from '@/store/user'
import { scrollIntoView } from '@/utils'
import { getProjectListByUser } from '@/assets/api/project'

const props = defineProps({
  word: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['select', 'close'])
const userStore = useUser()
const projectList = ref([])
const projectRef = ref([])
const projectActiveIndex = ref(0)
const taskList = ref([])
const taskRef = ref([])
const taskActiveIndex = ref(0)
const activeIsTask = ref(false)

const filterTask = computed(() => {
  return taskList.value.filter((i) => i.taskTitle.includes(props.word) || i.taskCode.includes(props.word))
})

watch(projectActiveIndex, (newVal) => {
  scrollIntoView(projectRef.value[newVal], false)
})

watch(taskActiveIndex, (newVal) => {
  scrollIntoView(taskRef.value[newVal], false)
})

/**
 * 选择任务
 */
function selectTask(task) {
  emit('select', { text: task.taskTitle, list: [task] })
}

/**
 * 选择项目
 */
function selectProject(project, index) {
  activeIsTask.value = true
  taskActiveIndex.value = 0
  projectActiveIndex.value = index
  getTaskListData(project.projectId)
}

getProjectListByUserData()
function getProjectListByUserData() {
  getProjectListByUser().then((res) => {
    if (res.code === 200) {
      projectList.value = res.rows
    } else {
      ElMessage.error(res.msg)
    }
  })
}

function getTaskListData(projectId) {
  getTcTaskInfoPage({
    projectId,
    taskTitle: props.word || null,
    taskCode: props.word || null,
  }).then((res) => {
    if (res.code === 200) {
      taskList.value = res.rows
    } else {
      ElMessage.error(res.msg)
    }
  })
}

useEventListener('keydown', (e) => {
  const activeIndex = activeIsTask.value ? taskActiveIndex : projectActiveIndex
  const list = activeIsTask.value ? filterTask : projectList
  // 退出
  if (e.code === 'Escape') {
    if (activeIsTask.value) {
      activeIsTask.value = false
      taskList.value = []
      taskActiveIndex.value = 0
    } else emit('close')
    // 向上选择
  } else if (e.code === 'ArrowUp') {
    if (activeIndex.value === 0) {
      activeIndex.value = list.value.length - 1
    } else {
      activeIndex.value--
    }
    // 向下选择
  } else if (e.code === 'ArrowDown') {
    if (activeIndex.value === list.value.length - 1) {
      activeIndex.value = 0
    } else {
      activeIndex.value++
    }
    // 确认选择
  } else if (e.code === 'Enter' || e.code === 'NumpadEnter') {
    if (activeIsTask.value) {
      const task = filterTask.value[activeIndex.value]
      if (task) {
        selectTask(task)
      }
    } else {
      activeIsTask.value = true
      getTaskListData(projectList[activeIndex])
    }
  }
})
</script>

<template>
  <div class="task-text">
    <div class="project-list">
      <template v-if="projectList.length">
        <div
          ref="projectRef"
          class="task-item"
          :class="{ active: projectActiveIndex === index }"
          v-for="(item, index) in projectList"
          :key="item.taskId"
          @click="selectProject(item, index)">
          <span>{{ item.projectName }}</span>
        </div>
      </template>
      <div v-else class="task-item">
        <span>没有参与任何项目</span>
        <span class="describe">快去参与项目吧</span>
      </div>
    </div>
    <div class="task-list">
      <template v-if="filterTask.length">
        <div
          ref="taskRef"
          class="task-item"
          :class="{ active: taskActiveIndex === index }"
          v-for="(item, index) in filterTask"
          :key="item.taskId"
          @click="selectTask(item)">
          <span>{{ item.taskTitle }}</span>
          <span class="describe">#{{ item.taskCode }}</span>
        </div>
      </template>
      <div v-else class="task-item">
        <span>没找到任务</span>
        <span class="describe">任务是否存在?</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-text {
  height: 100%;
  width: 650px;
  display: flex;
  .project-list {
    width: calc(50% - 1px);
    padding-right: 10px;
    overflow-y: auto;
  }
  .task-list {
    width: 50%;
    padding-left: 10px;
    border-left: var(--elp-border);
    overflow-y: auto;
  }
  .task-item {
    @include use-flex(center, space-between);
    cursor: pointer;
    font-size: 13px;
    padding: 5px 10px;
    .describe {
      font-size: 12px;
      color: var(--elp-color-info-light-3);
    }
    &.active,
    &:hover {
      border-radius: 4px;
      font-weight: bolder;
      background-color: var(--elp-color-info-light-9);
    }
  }
}
</style>
